<!-- 关注 -->
<template>
  <div class="index-container">
    <div class="header-box">
      <TabsList :tabsList="tabsList" :activeItem="active" />
      <Avater></Avater>
    </div>
    <div class="follow-main">
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        :immediate-check="true"
        @load="onLoad"
      >
        <div
          class="follow-item"
          :key="item.id"
          v-for="(item, index) in followData"
        >
          <div class="follow-item-left" @click="avaterClick(item)">
            <van-image
              width="3em"
              height="3em"
              round
              fit="cover"
              position="center"
              :src="item.avatar"
            ></van-image>
            <span>{{ item.nickname }}</span>
          </div>
          <div
            class="activity-item-name-follow"
            :class="item.isFollow ? 'activity-item-name-follow-true' : ''"
            @click="followAnchor(item,index)"
          >
            <van-icon v-if="!item.isFollow" name="plus" /><span>{{
              item.isFollow ? "取消关注" : "关注"
            }}</span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import icon_hand3 from "@/assets/image/icon_hand3.png";

import { GetFollow,UpdateFollow } from "@/api/index.js";
import { showToast } from "vant";

const route = useRoute();
const router = useRouter()

const state = reactive({
  icon_hand3,
  tabsList: [
    {
      id: 1,
      name: "关注",
    },
  ],
  page: 1,
  size: 8,
  total: 0,
});

const { tabsList, labelsColor } = toRefs(state);

let active = ref(1);

let loading = ref(false);
let finished = ref(false);
let followData = ref([]);
const GetFollowData = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
  };
  loading.value = true;
  let { data } = await GetFollow(params);
  followData.value = followData.value.concat(data.list);
  state.total = data.pagination.total;
  loading.value = false;
  if (followData.value.length == data.pagination.total) {
    finished.value = true;
  }
};

const onLoad = () => {
  if (followData.value.length < state.total && state.total != 0) {
    state.page++;
    GetFollowData();
  }
};

const followAnchor = async (item,index) => {
  let params = {
    id: Number(item.id),
    isFollow: !item.isFollow,
  };
  let data = await UpdateFollow(params);
  let msg = !item.isFollow ? "关注成功" : "取消关注";
  showToast(msg);
  followData.value[index].isFollow = !followData.value[index].isFollow;
};

const avaterClick = (item) => {
  router.push({
    name:'activityDetail',
    query:{
      anchorId:item.id
    }
  })
}

onMounted(() => {
  GetFollowData();
});
</script>



<style lang="scss" scoped>
.header-box {
  display: flex;
}
.follow-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
}
.follow-item-left {
  display: flex;
  align-items: center;
  span {
    margin-left: 10px;
  }
}
</style>
